<template>
  <div>
    <el-card class="box-card">
      <template v-slot:header>
        <div class="clearfix">
          <i class="el-icon-search"></i>
          <span style="margin-left: 8px">搜索</span>
        </div>
      </template>
      <div class="search-condition">
        <el-input v-model="keyword" placeholder="请输入关键词"></el-input>
        <el-button type="primary" @click="queryKnow">查询</el-button>
      </div>
    </el-card>

    <div class="opration">
      <div class="left-title">
        <i class="el-icon-notebook-2"></i>
        <span style="margin-left: 8px">数据操作</span>
      </div>
      <el-button @click="addKnow">添加</el-button>
    </div>

    <!-- 封装表格子组件 -->
    <kld-table :tableData="tableData" @handleUpdate="handleUpdate" />

    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script lang="ts">
import { ref, onBeforeMount } from "vue";
import { useRouter } from 'vue-router'
import { getKnowList, tableData, total } from 'service/kld/knowledge';
import KldTable from './components/KldTable.vue';

export default {
  components: {
    KldTable
  },
  setup() {
    // 关键词搜索
    const keyword = ref(null);
    const queryKnow = () => {
      console.log(keyword.value, "keyword");
    };
    // 初始化函数
    onBeforeMount(() => {
      getKnowList();
    });

    // 跳转到添加页面
    const iRouter = useRouter(); 
    const addKnow = () => {
      // console.log(iRouter, "跳转到添加页");
      iRouter.push("/kld/addknow");
    }

    // 跳转到修改页面
    const handleUpdate = (row) => {
      // console.log(row.id, "修改id");
      iRouter.push({ path: "/kld/addknow", query: { id: row.id, params: JSON.stringify(row) } });
    }
    
    return { tableData, keyword, queryKnow, total, addKnow, handleUpdate };
  },
};
</script>

<style lang='scss' scoped>
.box-card {
  margin-bottom: 20px;
  .search-condition {
    display: flex;
  }
}
.el-input {
  width: 340px;
  margin-right: 20px;
}
.page {
  text-align: right;
  margin-top: 20px;
}
.opration {
  height: 60px;
  border: 1px solid #e0dddd;
  border-radius: 5px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
</style>